<script setup>
import {ref} from "vue";
import { useUserStore } from '@/stores/user';
import AppHeader from '@/layouts/Header.vue';
import Sidebar from '@/layouts/Sidebar.vue';

const userStore = useUserStore();
const isVerticalMenu = ref(true);
const sidebarCollapsed = ref(false);

const handleLayoutToggle = () => {
  isVerticalMenu.value = !isVerticalMenu.value;
  sidebarCollapsed.value = !isVerticalMenu.value;
};
</script>

<template>
  <a-layout class="h-screen">
    <Sidebar
        v-if="isVerticalMenu"
        :is-collapsed="sidebarCollapsed"
    />

    <a-layout>
      <AppHeader
          :menu-items="menuTree"
          :is-vertical="isVerticalMenu"
          @toggle-layout="handleLayoutToggle"
      />

      <a-layout-content class="main-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.main-content {
  @apply p-4 overflow-auto;
  min-height: calc(100vh - 64px);
}
</style>